<template>
	<view class="container">
		<mx-navbar :isClearFixed="true" title="我的地址" />
		<view class="main">
			<view class="box">
				<view class="acard" v-for="(item,index) in list" :key="index">
					<view class="atop">
						<view class="ainfo" @click="setAddr(item)">
							<view class="at1">
								<text>{{item.name}}</text>
								<text class="phone">{{item.phone}}</text>
							</view>
							<view class="at2">
								<text>{{ `${item.province}${item.city}${item.area}${item.address}` }}</text>
							</view>
						</view>
						<view class="edit" @click.stop="goEdit(item)">
							<text class="cuIcon cuIcon-edit" ></text>
						</view>
					</view>
					<view class="abot">
						<view class="abl" @click="setDefault(item)">
							<text class="cuIcon cuIcon-square" v-if="item.default == 1"></text>
							<text class="cuIcon cuIcon-squarecheckfill act" v-if="item.default == 2"></text>
							<text :class="item.default == 2? 'actt':''">设置默认</text>
						</view>
						<view class="abr" @click.stop="del(item.id)">删除</view>
					</view>
				</view>

				<mx-empty v-if="list.length == 0" txt="暂无任何记录，请添加～"></mx-empty>
			</view>
		</view>
		<view class="btn-box">
			<button type="primary" size="default" @tap="make">新增地址</button>
		</view>
	</view>
</template>

<script setup>
	const {proxy} = getCurrentInstance()
	const from = ref(1)
	onLoad((options)=> {
		from.value = options.from || 1
	})
	onShow(()=> {
		getData(true)
	})
	
	const data = reactive({
		list: []
	})
	const {list} = toRefs(data)
	async function getData(loading) {
		let res = await proxy.$api('AddrList',{},loading)
		if(res.code == 0) {
			data.list = res.data.list
		}
	}

	function setAddr(item) {
		if(from.value == 2) {
			proxy.$store.pay_addr = item
			proxy.$go('back')
		}
	}
	
	function make() {
		proxy.$go('/pages-user/addr/make')
	}
	
	function goEdit(item) {
		proxy.$go(`/pages-user/addr/make?id=${item.id}`)
	}
	
	async function setDefault(item) {
		item.default = item.default == 1 ? 2 : 1
		let res = await proxy.$api('AddrDefault',{id: item.id}, false)
		if(res.code == 0) {
			proxy.$toast('设置成功').then(()=> {
				getData(false)
			})
		}
	}
	
	async function del(id) {
		let res = await proxy.$api('AddrDel',{id})
		if(res.code == 0) {

			if(proxy.$store.pay_addr && proxy.$store.pay_addr.id && proxy.$store.pay_addr.id == id) {
				proxy.$store.pay_addr = {}
			}
			proxy.$toast('删除成功').then(()=> {
				getData(false)
			})

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
	}
	
	.main {
		width: 100%;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 100rpx;
		
		.box{
			width: 100%;
			height: auto;
			.acard{
				width: 100%;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				margin-bottom: 30rpx;
				.atop{
					width: 100%;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					padding: 30rpx 0;
					.ainfo{
						flex: 1;
						padding-left: 30rpx;
						.phone{
							margin-left: 30rpx;
						}
					}
					.edit{
						width: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						.cuIcon-edit{
							font-size: 44rpx;
						}
					}
					.at2{
						margin-top: 16rpx;
						color: #000;
					}
				}
				.abot{
					border-top: 1px solid #ececec;
					padding: 30rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.abl,.abr{
						font-size: 24rpx;
					}
					.abr{
						color: #f00;
					}
					.abl{
						display: flex;
						align-items: center;
						color: #999;
						.act{
							font-size: 44rpx;
							color: $main_color;
						}
						.cuIcon-square{
							font-size: 44rpx;
							color: #ececec;
						}
						.actt{
							color: $main_color;
						}
					}
				}
			}
		}
		
	}
	
	.btn-box {
		height: 130rpx;
		background-color: #FFFFFF;
		box-shadow: 0 0 20rpx rgba($color: #ececec, $alpha: 0.1);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10rpx 0;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;
		
		button {
			height: 100rpx;
			width: 90%;
			border-radius: 110rpx !important;
			background-color: $main_color;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
		}
	}
</style>
